<template>
  <AppPage :show-footer="false">
<!--      <n-card style="margin-bottom: 15px">-->
<!--        <QueryBarItem label="门店" :label-width="80">-->
<!--          <n-select-->
<!--              v-model:value="data.space_id"-->
<!--              style="width: 150px"-->
<!--              :options="data.option_space"-->
<!--              @update:value="getDate"-->
<!--              clearable-->
<!--              placeholder="请选择门店"-->
<!--          />-->
<!--        </QueryBarItem>-->
<!--      </n-card>-->
      <n-grid :cols="3" :x-gap="12" :y-gap="8">
        <n-gi>
          <n-card class="cursor-pointer" hover:card-shadow title="今日销售额 (元)" size="small" :segmented="{
            content: true,
            footer: 'soft',
          }">
            <template #header-extra>
              <n-icon size="20">
                <TheIcon  icon="material-symbols:info" :size="18" class="mr-5" />
              </n-icon>
            </template>
            <div text-30 font-semibold>
              <n-number-animation :from="0" :to="data.ret_data.row1_left.price" />
            </div>
            <div ref="chartSalesVolume" style="height: 100px;"></div>
            <template #footer>
              <span color="#c147e3"></span>
              <n-flex justify="space-between" size="large">
                <div>
                  总销售额 <span color="#8945c3">{{data.ret_data.row1_left.all_price}}</span>
                </div>
                <div>
                  日同比 <span color="#B4346E">{{data.ret_data.row1_left.bl}}</span>
                </div>
              </n-flex>
            </template>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card class="cursor-pointer" hover:card-shadow title="今日订单数" size="small" :segmented="{
            content: true,
            footer: 'soft',
          }">
            <template #header-extra>
              <n-icon size="20"  >
                <TheIcon icon="material-symbols:info" :size="18" class="mr-5" />
              </n-icon>
            </template>
            <div text-30 font-semibold>
              <n-number-animation :from="0" :to="data.ret_data.row1_middle.price" />
            </div>
            <div ref="chartOrder" style="height: 100px;"></div>
            <template #footer>
              <n-flex justify="space-between" size="large">
                <div>
                  总订单量 <span>{{data.ret_data.row1_middle.all_price}}</span>
                </div>
                <div>
                  日同比 <span color="#47ba6b">{{data.ret_data.row1_middle.bl}}</span>
                </div>
              </n-flex>
            </template>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card class="cursor-pointer"  hover:card-shadow title="今日预约" size="small" :segmented="{
            content: true,
            footer: 'soft',
          }">
            <template #header-extra>
              <n-icon size="20" >
                <TheIcon icon="material-symbols:info" :size="18" class="mr-5" />
              </n-icon>
            </template>
            <div text-30 font-semibold>
              <n-number-animation :from="0" :to="data.ret_data.row1_right.price" />
            </div>

            <div ref="chartUv" style="height: 100px;"></div>
            <template #footer>
              转换率 <span>{{data.ret_data.row1_right.bl}}</span>
            </template>
          </n-card>
        </n-gi>
      </n-grid>


      <n-card title="待处理商品" :segmented="{
        content: true,
        footer: 'soft',
      }" class="mb-10 mt-10 " hover:card-shadow  size="small">
        <n-flex justify="space-around" size="large">
          <div text-center v-for="item in data.ret_data.row2" :key="item.id" v-bind="item">
            <p mt-5 text-15 op-70>{{ item.name }}
              <TheIcon v-if="item.name == '预警通知' && item.value != 0" icon="material-symbols:lightbulb" color="#ff0300"
                       :size="15" class="mr-5" />
            </p>
            <p mt-5 text-20 font-semibold>{{ item.value }}</p>
            <router-link :to="item.path">
              <n-button mt-5 size="tiny" type="tertiary" :bordered="false" text-color="#8945c3">
                查看详情
              </n-button>
            </router-link>
          </div>

        </n-flex>
      </n-card>

      <n-grid :cols="2" :x-gap="12" :y-gap="8" mb-15>

        <n-gi>
        <n-card   content-style="padding: 0;" hover:card-shadow title="待办事项" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
          <template #header-extra>
            <n-badge :value="data.ret_data.row3_right.count"  show-zero  />
          </template>
          <n-data-table :columns="data.columns1" :data="data.ret_data.row3_right.list" striped/>

        </n-card>
        </n-gi>
      </n-grid>



  </AppPage>
</template>

<script setup>
import {onMounted, ref, nextTick, h} from 'vue';
import * as echarts from 'echarts';
import TheIcon from '@/components/icon/TheIcon.vue'
import api from '@/api'
import {NButton, NFlex, NSelect, NTag} from "naive-ui";
import QueryBarItem from "@/components/query-bar/QueryBarItem.vue";
const data = reactive({
  option_space:[{id:0, name:'所有门店',label: '所有门店', value: 0,}],
  shows: 0,
  space_id:0,
  ret_data:{
    row1_left:{
      price:0,
      all_price:0,
      bl:"0%",
      map:[]
    },
    row1_middle:{
      price:0,
      all_price:0,
      bl:"0%",
      map:[]
    },
    row1_right:{
      price:0,
      all_price:0,
      bl:"0%",
      map:[]
    },
    row2:[],
    row3_left:{
      data1:[],
      data2:[]
    },
    row3_right:{
      list:[],
      count:""
    },
  },
  columns1: [{
    type: "selection"
  },
    {
      title: "类型",
      key: "type",
      render(row) {
        let tag="商品"
        if(row.type===1){
           tag = "预约订单"
        }
        return h(
            NTag,
            { type: 'primary', size: 'small', bordered: false, style: { margin: '2px 3px' } },
            { default: () => tag }
        )
      },
    },
      {
      title: "事项内容",
      key: "id"
    },
    {
      title: "处理状态",
      key: "status_name"
    },
    {
      title: "付款时间",
      key: "pay_time"
    }
    ],
});
const chartSalesVolume = ref(null); //销售额
const chartOrder = ref(null); //订单
const chartUv = ref(null)
const chartPageView = ref(null)
const chartMarket = ref(null)
onMounted(() => {
  getDate()
  api.getSpaceList().then((res) => {
    data.option_space = res.data
    data.option_space.push({
      "label":"全部","value":0
    })
  })
});

async function getDate() {
  let ret = await api.getWorkbench({ space_id: data.space_id })
  data.ret_data = ret.data
  getSalesVolume()
  getEchartstwo()
  getchartUv()
  getChartPageView()
}

//销售额
const getSalesVolume = () => {
  const myChart = echarts.init(chartSalesVolume.value);
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
    },
    xAxis: {
      type: 'category',
      data: data.ret_data.row1_left.date,
      show: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: data.ret_data.row1_left.map
  };
  option && myChart.setOption(option);
}
//订单数
const getEchartstwo = () => {
  const myChart = echarts.init(chartOrder.value);
  const option = {
    color: ['#8945c3'],
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
    },
    xAxis: [
      {
        type: 'category',
        data: data.ret_data.row1_left.date,
        show: false
      }
    ],
    yAxis: [
      {
        type: 'value',
        show: false

      }
    ],
    series: [
      {
        name: '总单',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#8945c3'
            },
            {
              offset: 1,
              color: '#8945c3'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: data.ret_data.row1_middle.map
      },
    ]
  };

  option && myChart.setOption(option);
}
//UV
const getchartUv = () => {
  const myChart = echarts.init(chartUv.value);
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
    },
    xAxis: {
      type: 'category',
      data: data.ret_data.row1_left.date,
      show: false

    },
    yAxis: {
      type: 'value',
      show: false

    },
    series: [
      {
        name: 'UV',
        data: data.ret_data.row1_right.map,
        type: 'bar',
        color:"#8945c3"
      }
    ]
  };

  option && myChart.setOption(option);
}

//浏览量
const getChartPageView = () => {
  const myChart = echarts.init(chartPageView.value);
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['小程序', 'ios', '安卓'],

    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: data.ret_data.row3_left.data1,
        color:['#8945c3','#c147e3','#b988d5'],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
}
//销售额
const getChartMarket = () => {
  const myChart = echarts.init(chartMarket.value);
  const option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.ret_data.row3_left.data2,
        type: 'line',
        areaStyle: {}
      }
    ]
  };
  option && myChart.setOption(option);

}

</script>
